<template>
  <div class="download-center">
    <div class="header">
      <h2>下载中心</h2>
    </div>
    <div class="content">
      <div class="category">
        <h3>工具</h3>
        <div class="download-item">
          <div class="download-item__image">
            <img src="../../assets/images/rtsp.png" alt="RTSP" />
          </div>
          <div class="download-item__info">
            <h4>网页播放器</h4>
            <p>版本：v1.0 | 大小：19M</p>
            <button class="download-btn" @click="downLoadBtn('file1')">
              立即下载
            </button>
          </div>
        </div>
      </div>
      <div class="category">
        <h3>浏览器</h3>
        <div class="download-item">
          <div class="download-item__image">
            <img src="../../assets/images/google.png" alt="谷歌浏览器" />
          </div>
          <div class="download-item__info">
            <h4>谷歌浏览器</h4>
            <p>版本：109.0.5414.120 | 大小：88.00M</p>
            <button class="download-btn" @click="downLoadBtn('file2')">
              立即下载
            </button>
          </div>
        </div>
      </div>
      <div class="category">
        <h3>移动端</h3>
        <div class="download-item">
          <div class="download-item__image">
            <img
              src="../../assets/images/app.png"
              alt="新港街道综合治理管理APP"
            />
          </div>
          <div class="download-item__info">
            <h4>新港街道综合治理管理APP</h4>
            <!-- <p>版本：V1.0 | 大小：19M</p> -->
            <img style="width: 100px; height: 85px" src="./ewm.png" />
            <!-- <button class="download-btn" @click="downLoadBtn('file3')">
              立即下载
            </button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
// 定义下载方法
const downLoadBtn = (fileKey) => {
  let filePath = "";
  switch (fileKey) {
    case "file1":
      filePath = "http://20.13.0.128:9090/enforcement/Google_Chrome.exe";
      // filePath = '/public/images/VideoWebPlugin.exe'; // 替换为实际的本地文件路径
      break;
    case "file2":
      filePath = "http://20.13.0.128:9090/enforcement/VideoWebPlugin.exe";
      // filePath = ''; // 替换为实际的本地文件路径
      break;
    case "file3":
      filePath = "/public/images/__UNI__3C01E88__20250429202925.apk.1"; // app
      break;
    default:
      console.error("Invalid file key");
      return;
  }
  if (filePath) {
    // 打开文件
    window.open(filePath, "_blank");
  } else {
    ElMessage({
      message: "当前暂无文件",
      type: "warning",
    });
  }
};

// 组件名称
defineOptions({
  name: "DownloadCenter",
});
</script>

<style scoped>
/* 全局样式 */
.download-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center;
  margin-bottom: 50px;
}

.header h2 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #2263bf;
  line-height: 28px;
  text-align: left;
  font-style: normal;
}

.content {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
}

.category {
  width: 30%;
  text-align: left;
}

.category h3 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #999999;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  margin-bottom: 16px;
}

.download-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.download-item:hover {
  transform: translateY(-5px);
}

.download-item__image {
  flex: 1;
  max-width: 100px;
  margin-right: 30px;
}

.download-item__image img {
  width: 100%;
  height: auto;
}

.download-item__info {
  flex: 2;
}

.download-item__info h4 {
  margin: 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  text-align: left;
  font-style: normal;
  margin-bottom: 6px;
}

.download-item__info p {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-bottom: 12px;
}

.download-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #2263bf;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #005acc;
}
</style>
